<template>
  <el-dialog
    :model-value="visible"
    width="50%"
    top="50px"
    title="预览"
    @close="handleCancel"
    center
  >
    <GenForm 
      ref="genForm" 
      v-if="visible" 
      :formData="normalComponents"
      :gridData="gridData"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import GenForm from '../../form-generate/gen-form.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const store = useStore()
const emit = defineEmits(['cancel'])

// 获取普通组件数据
const normalComponents = computed(() => {
  const config = store.state.form.config
  return config.filter(item => item.type !== 'grid')
})

// 获取栅格布局数据
const gridData = computed(() => {
  return store.state.form.config.filter(item => item.type === 'grid')
})

const handleCancel = () => {
  emit('cancel')
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
